import { ComponentType } from 'react'
import { Graph, Markup, Node } from '@antv/x6'
import { register } from '@antv/x6-react-shape'
import AppStore from '@/store/app'
import { Lang } from '@/config'
import { UUID } from '@/store/metaStore'

// 语言切换
export const switchLanguage = (
  appStore: AppStore,
  graph: Graph,
  newLang: 'English' | '中文'
) => {
  appStore.setLanguage(newLang === 'English' ? Lang.en : Lang.zh)
}

export const addEdge = (graph: Graph, fromID: string, toID: string) => {
  graph.addEdge({
    source: {
      cell: `${fromID}`,
      port: `${fromID}-out-port`,
    },
    target: {
      cell: `${toID}`,
      port: `${toID}-in-port`,
    },
  })
}

export const addAssetInCanvas = (inputData: {
  graph: Graph // 目标画布
  cardID: string // 资产唯一ID
  component: ComponentType<{
    node: Node
    graph: Graph
  }> // 设计资产组件
  position?: [number, number] // 添加该组件位于画布的位置
}): Node => {
  const { graph, cardID, component, position } = inputData

  register({
    shape: cardID,
    effect: ['data'],
    component: component,
  })

  const newNode = graph.addNode({
    x: position ? position[0] : 120, // 默认位置待确认
    y: position ? position[1] : 50, // 默认位置待确认
    id: cardID,
    shape: cardID,
    portMarkup: [Markup.getForeignObjectMarkup()],
    ports: {
      groups: {
        /* in: {
          attrs: {
            fo: {
              width: 10,
              height: 10,
              x: -5,
              y: 0 + 19 - 5,
              magnet: 'true',
            },
          },
          zIndex: 1,
          position: {
            name: 'left',
          },
        }, */
        out: {
          attrs: {
            fo: {
              width: 10,
              height: 10,
              x: -5,
              y: 0 + 19 - 5,
              magnet: 'true',
            },
          },
          zIndex: 1,
          position: {
            name: 'right',
          },
        },
      },
      items: [
        // { id: `${cardID}-in-port`, group: 'in' },
        { id: `${cardID}-out-port`, group: 'out' },
      ],
    },
  })

  return newNode
}

export const addMethodInCanvas = (inputData: {
  graph: Graph // 目标画布
  cardID: string // 资产唯一ID
  component: ComponentType<{
    node: Node
    graph: Graph
  }> // 设计资产组件
  position?: [number, number] // 添加该组件位于画布的位置
}) => {
  const { graph, cardID, component, position } = inputData

  register({
    shape: cardID,
    effect: ['data'],
    component: component,
  })

  graph.addNode({
    x: position ? position[0] : 120, // 默认位置待确认
    y: position ? position[1] : 50, // 默认位置待确认
    id: cardID,
    shape: cardID,
    portMarkup: [Markup.getForeignObjectMarkup()],
    ports: {
      groups: {
        absolute_in: {
          position: {
            name: 'absolute',
          },
          attrs: {
            fo: {
              width: 10,
              height: 10,
              magnet: 'true',
            },
          },
          zIndex: 1,
        },
        absolute_out: {
          position: {
            name: 'absolute',
          },
          attrs: {
            fo: {
              width: 10,
              height: 10,
              magnet: 'true',
              y: -5,
            },
          },
          zIndex: 1,
        },
      },
    },
  })
}

// TODO
export const addEdgeInCanvas =
  (graph: Graph) =>
  (
    fromCardID: UUID, // 源卡片ID
    fromCardPortIndex: number, // 源卡片的输出桩索引，也即连线起点
    toCardID: UUID, // 目标卡片ID
    toCardPortIndex: number // 目标卡片的输入桩索引，也即连线终点
  ) => {
    graph.addEdge({
      source: {
        cell: `${fromCardID}`,
        port: `${fromCardID}-out-port`,
      },
      target: {
        cell: `${toCardID}`,
        port: `${toCardID}-${toCardPortIndex + 1}`,
      },
    })
  }
